<template>
  <div class="aside" id="aside" v-if="this.$store.state.islogin">
    <!--  v-if="!this.$store.state.isAdmin" -->
    <div class="top">
    <!--  -->
      <!-- <i class="i-icon-user"></i> -->
    </div>

    <ol class="ol">
        <li class="li" @click="toDataViews()"  v-if="this.$store.state.isAdmin"><i class="el-icon-s-data"></i><span>数据可视化</span></li>
        <li class="li" @click="controlSonbox1()"><i class="el-icon-menu"></i><span>药品管理</span></li>
            <div class="sonbox" ref="ref_sonbox1" @click="router(index=1)">药品操作</div>
        <li class="li" @click="controlSonbox2()"><i class="el-icon-s-custom"></i><span>用户管理</span></li>
            <div class="sonbox" ref="ref_sonbox2" @click="router(index=2)" >操作用户</div>
            <div class="sonbox" ref="ref_sonbox3"  v-if="this.$store.state.isAdmin" @click="router(index=3)">药方审批</div>
        <li class="li" @click="controlSonbox3()"  v-if="this.$store.state.isAdmin"><i class="el-icon-document"></i><span>订单管理</span></li>
            <div class="sonbox" ref="ref_sonbox4"  v-if="this.$store.state.isAdmin" @click="router(index=4)">订单操作</div>
        <li class="li"><i class="el-icon-setting"></i><span>其它</span> </li>
      <!-- <li class="li" v-for="(item,index) in list" :key="index" @click="router(index,item)">
      <el-button :class="item.icon"></el-button>
      {{item.label}}
    </li> -->
    </ol>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //侧边栏
      iscontrolSonbox1:false,
      iscontrolSonbox2:false,
      iscontrolSonbox3:false,
      list: [
        {
          path: "/home",
          name: "home",
          label: "首页",
          icon: "el-icon-s-home",
          url: "Home/Home",
        },
        {
          path: "/goods",
          name: "goods",
          label: "药品管理",
          icon: "el-icon-goods",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "el-icon-user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "el-icon-more",
        },
        {
          label: "设置",
          icon: "el-icon-setting",
        },
      ],
      chlidren: [
        {
          path: "/page1",
          name: "page1",
          label: "页面1",
          icon: "setting",
          url: "Other/PageOne",
        },
        {
          path: "/page2",
          name: "page2",
          label: "页面2",
          icon: "setting",
          url: "Other/PageTwo",
        },
      ],
    };
  },
  methods: {
    router(index){
      switch(index>=0){
        case index ==1:
          this.$router.push({
            path:'/goods'
          })
          break
         case index ==2:
          this.$router.push({
            path:'/user'
          })
          break
           case index ==3:
          this.$router.push({
            path:'/check'
          })
          break
          case index ==4:
          this.$router.push({
            path:'/order'
          })
          break
        }
      },
    toDataViews(){
        this.$router.push({
            path:'/home'
        })
      },
    controlSonbox1(){
      this.iscontrolSonbox1 = !this.iscontrolSonbox1
      if(this.iscontrolSonbox1==true){
           this.$refs.ref_sonbox1.style.opacity = '100%'    //显示  opacity 不透明度
           this.$refs.ref_sonbox1.style.height = '50px'
           this.$refs.ref_sonbox1.style.transition = 'all 0.5s'  
      }else{
         this.$refs.ref_sonbox1.style.opacity = '0%'
         this.$refs.ref_sonbox1.style.height = '0px'
         this.$refs.ref_sonbox1.style.transition = 'all 0.5s'
      }
    },
    controlSonbox2(){
      this.iscontrolSonbox2 = !this.iscontrolSonbox2
      if(this.$store.state.isAdmin == true){
         if(this.iscontrolSonbox2==true){
           this.$refs.ref_sonbox2.style.height = '50px'
           this.$refs.ref_sonbox3.style.height = '50px'
           this.$refs.ref_sonbox2.style.transition = 'all  0.5s'
           this.$refs.ref_sonbox3.style.transition = 'all  0.5s'
           this.$refs.ref_sonbox2.style.opacity = '100%'
           this.$refs.ref_sonbox3.style.opacity = '100%'
           this.$refs.ref_sonbox2.style.borderBottom= '2px solid #ccc'
          }else{
            this.$refs.ref_sonbox2.style.opacity = '0%'
            this.$refs.ref_sonbox3.style.opacity = '0%'
            this.$refs.ref_sonbox2.style.height = '0px'
            this.$refs.ref_sonbox3.style.height = '0px'
            this.$refs.ref_sonbox2.style.transition = 'all  0.5s'
            this.$refs.ref_sonbox3.style.transition = 'all  0.5s'
            this.$refs.ref_sonbox2.style.borderBottom= '0px solid '
          }
      }else{
          if(this.iscontrolSonbox2==true){
           this.$refs.ref_sonbox2.style.height = '50px'
           this.$refs.ref_sonbox2.style.transition = 'all  0.5s'
           this.$refs.ref_sonbox2.style.opacity = '100%'
           this.$refs.ref_sonbox2.style.borderBottom= '2px solid #ccc'
          }else{
            this.$refs.ref_sonbox2.style.opacity = '0%'
            this.$refs.ref_sonbox2.style.height = '0px'
            this.$refs.ref_sonbox2.style.transition = 'all  0.5s'
            this.$refs.ref_sonbox2.style.borderBottom= '0px solid '
          }
      }
     
    },
     controlSonbox3(){
      this.iscontrolSonbox3 = !this.iscontrolSonbox3
      if(this.iscontrolSonbox3==true){
           this.$refs.ref_sonbox4.style.height = '50px'
           this.$refs.ref_sonbox4.style.transition = 'all  0.5s'
           this.$refs.ref_sonbox4.style.opacity = '100%'
      }else{
         this.$refs.ref_sonbox4.style.opacity = '0%'
         this.$refs.ref_sonbox4.style.height = '0px'
         this.$refs.ref_sonbox4.style.transition = 'all  0.5s'
      }
    },
  },
};
</script>

<style lang="less" scoped>
.aside {
  width: 200px;
  height: 120%;
  background: #1685a9;
}
.top {
  width: 180px;
  height: 150px;
  object-fit: contain;
}
.top>img{
  width: 70%;
  height: 75%;
  border-radius: 15%;
}
.router {
  text-decoration-line: none;
  margin-left: 4px;
  color: white;
  line-height: 50px;
  font-family: "宋体";
}
img {
  margin: 10px 10px 10px 20px;
  width: 60%;
  height: 70%;
  border: 2px solid rgb(246, 244, 244);
  // box-shadow: 1px 1px 10px rgba(222, 129, 134,);
  border-radius: 5%;
}
img:hover {
  box-shadow: 1px 1px 10px rgb(247, 220, 230);
}

.ol {
  margin-top: -5px;
  width: 100%;
  height: 100%;
  border: 2px solid white;
  display: flex;
  flex-flow: column;
  list-style: none;
  transition: all 2s;
   user-select:none;
}
.ol > .li {
  width: 96.5%;
  height: 50px;
  border: 2px solid white;
  margin-left: -20%;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-left: none;
  border-right: none;
  color: white;
  line-height: 50px;
  font-family: "宋体";
  text-indent: 5px;
}
.sonbox{
  width: 95%;
  height: 00px;
  background-color:#a1afc9 ;
  margin-left: -20%;
  color: white;
  line-height: 50px;
  font-family: "宋体";
  text-indent: 30px;
  font-size: 15px;
  opacity: 0%;
   user-select:none;
}
.sonbox:hover{
  transition: all 1s;
  background-color: #f8f8f8;
  color: gray;
}
i{
  font-size: 20px;
}
//icon之间的间隙
span{
    margin-left: 10px;
    text-align: left;
}
// .li:nth-child(3) {
//   text-align: left;
//   margin-top: 200%;
//   border-top: 2px solid rgb(218, 148, 151);
//   border-bottom: 2px solid rgb(218, 148, 151);
//   border-left: 2px solid rgb(218, 148, 151);
//   border-right: none;
// }
.li:hover {
  background-color: aquamarine;
}
/deep/ .el-icon-s-home {
  width: 10px;
  height: 10px;
  margin-left: 4px;
  line-height: 0px;
  background-color: #2d2c2c;
  color: white;
}
/deep/ .el-icon-goods {
  width: 10px;
  height: 10px;
  margin-left: 4px;
  line-height: 0px;
  background-color: #2d2c2c;
  color: white;
}
/deep/ .el-icon-user {
  width: 10px;
  height: 10px;
  margin-left: 4px;
  line-height: 0px;
  background-color: #2d2c2c;
  color: white;
}
/deep/ .el-icon-more {
  width: 10px;
  height: 10px;
  margin-left: 4px;
  line-height: 0px;
  background-color: #2d2c2c;
  color: white;
}
/deep/ .el-icon-setting {
  font-size: 20px;
  margin-left: 4px;
  line-height: 0px;

  background-color: #2d2c2c;
  color: white;
}
</style>